css フォント設定（font-family）する場合のルールやらTipsやら

現状（2023）は以下にしようか。

code: css

body {

font-family: -apple-system,"BlinkMacSystemFont","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif

}

zennの見た目が綺麗なので、それを真似する感じでいいでしょう。

どうやらzennは欧文フォントを入れてないようだ。

ルール

フォントはcssの「font-family」で設定する

code: sample.css

body {

font-family: "Meiryo"

}

フォントの指定には、「フォントファミリー名」と「総称フォント」の2つが存在する

フォントファミリーは、フォントの具体と思えばOK。

総称フォントは、フォントカテゴリ（ex：ゴシック、明朝体など）が決まってて、その中の具体は端末やブラウザによって変わるらしい。

フォントファミリー名は引用符で囲む、総称フォントは引用符で囲まない

code: family.css

body {

font-family: "Meiryo", san-serif

}

メイリオはフォントファミリー名、san-serifは総称フォント

前に書いたフォントが優先される

以下のような状況だと、メイリオが先に適用をされようとする。

code: family.css

body {

font-family: "Meiryo", san-serif

}

font-familyに複数のフォントを指定した場合、前に書いたフォントから優先的に適用されます。もしユーザーの端末に、指定したフォントが入っていなければ、次のフォント、また次のフォント…という順番で、ブラウザはフォントを探していきます。

Tips

OSごとにインストールされているフォントが異なるので、それぞれで使うフォントを決めて指定する

Win、Mac、iOS（iPhone、IPad）などのOSは、標準でインストールされてるフォントが異なる。

https://willcloud.jp/wp-content/uploads/2020/04/img-font-family-09.png

Androidのことは気にしなくていいらしい

AndroidはOSによってインストールされてるフォントが異なるらしい。

それに対応しようとすると、設定が複雑になるので諦めるのが無難とのこと。

総称フォントは最後に指定する

最後の砦が大事。

欧文フォントを和文フォントよりも前に指定しておく

欧文フォントも使う場合は、和文よりも前が大事。

じゃないと、和文の英語が採用されちゃうよ。

欧文フォントと和文フォントを共存させる場合は、できる限りフォントが似たものにする

じゃないと読みにくくなっちゃう。

ゴシックならゴシック系でまとめる。明朝なら明朝系でまとめる

英語だとセリフ体とかそういうの。

あのOSだと明朝で...みたいな。

まあ、基本ゴシックに揃えるのが無難かな。

ただ、一部の箇所では明朝使いたいってなって、その部分にfont-familyを設定する場合は、明朝系のフォントで揃えるようにしな。

Input

hr.icon

font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。

2022年は以下が無難らしい

code: sample.css

body {

font-family: "Helvetica Neue",

Arial,

"Hiragino Kaku Gothic ProN",

"Hiragino Sans",

Meiryo,

sans-serif;

}

ブラウザとOSのアップデートがさまざまな問題を引き起こしてきました。ウェブサイトの配信元にしてみれば、何もしていないのにウェブサイトのフォント表示が突然おかしくなるわけです。今までに起きたフォント変遷の歴史をおさらいしてみましょう。

ユーザーが設定しない限り、ブラウザにはデフォルトのフォントが指定されています。OSに新しいフォントが搭載されても、デフォルトフォントはめったに変更されることがありません。そういった意味ではsans-serifは新しいフォント体験を得ることはできないものの、比較的影響の少ない安全な選択とも言えるでしょう。

2017年にWindowsのChromeとFirefoxでsans-serifがＭＳ Ｐゴシックからメイリオへ変更となりました。総称フォントは時代の流れをうけることを認識した出来事でした。

2019年のmacOS Catalinaリリース時に、Chromeのsans-serifが明朝体で表示される現象が発生しました。macOSではsans-serifは「ヒラギノ角ゴシック ProN」がもともと割り当てられていたのですが、macOS CatalinaのChromeでトラブルがあり明朝体が割り当てられてしまったのです。

なんかエイリアス的な感じかな。

Appleには可読性に優れたSan Franciscoというフォントが搭載されています。ブラウザではfont-familyに-apple-systemとBlinkMacSystemを指定することで、San Franciscoで表示できます。

そういうフォントがあるのね、総称フォントかな。しらんけど。

San Franciscoは人気のフォントなので、モダンなウェブサイトを目指して採用したいHTMLコーダーもいるでしょう。ただ、執筆時点では-apple-sytem等の指定は大きな問題が起きていませんが、欧文に限らず和文への影響も考慮すると安全策として避けるのが無難です。

まあ、問題が起きないとも限らないよねうん確かに。

けど、zennとかでも使われてるっぽいし。Macなら使えるようにしたいところ！！

幸いにもHelvetica NeueとArialは生い立ちから字形が似ているため、Arialを使っておけばApple系OSとWindowsでの表示差異をおさえることができます。

なるほど。

無難にメイリオ（Meiryo）を使います。もしくは、Windows 10 October 2018 Updateで搭載されたBIZ UDPゴシック（BIZ UDPGothic）もいいでしょう。BIZ UDPGothicを使う場合は、冒頭のCSSは次の通りとなります。Meiryoよりも優先指定します。

なんかあれだな、端末自体にインストールされてないとそのフォントは使えないんだな。

そして、フォントが同じでもブラウザごとにフォント表示が微妙に異なるってことがあるんだ。

総称フォント

table:

総称フォント名 フォントカテゴリー 適用フォント例

sans-serif ゴシック体 メイリオ、ヒラギノ角ゴシック、Arial

serif 明朝体 MS P明朝、ヒラギノ明朝、Times

system-ui OSのUIと同じフォント Yu Gothic UI、Meiryo、ヒラギノ角ゴシック、San Francisco

monospace 等幅フォント MSゴシック、MS明朝、Osaka-Mono

cursive 筆記体 Comic Sans MS、Scriptなど

fantasy 装飾系フォント alba、Chickなど

総称フォントを指定した場合は、通常はOSやブラウザごとにデフォルト設定されたフォントが自動的に適用されます。

なるほどなぁ。

なるほど。

フォントファミリー名は、日本語フォント・欧文フォント、またフォント名にスペースを含む・含まずを問わず、ダブルクォーテーション（”）、またはシングルクォーテーション（’）の引用符で囲うことが推奨されています。

一方で、総称フォント名は引用符では囲わないようにしてください。もし引用符で囲ってしまうと、ブラウザがフォントファミリー名として認識してしまい、総称フォント名として正しく機能しない場合があります。

フォントファミリー名は複数指定が可能です。各フォントファミリー名をカンマ（,）で区切って記述します。カンマの後のスペースは空けても空けなくてもどちらでも構いません。

※フォントファミリー名に、日本語名（例：メイリオ）と英語名（例：Meiryo）の両方を指定する必要はありません。最新の主要ブラウザは、どちらかを指定しておけば問題なく表示されます。両方表記するという方法は、過去に日本語名のフォントを認識しないブラウザがあった名残です。

font-familyに複数のフォントを指定した場合、前に書いたフォントから優先的に適用されます。もしユーザーの端末に、指定したフォントが入っていなければ、次のフォント、また次のフォント…という順番で、ブラウザはフォントを探していきます。

Windows、macOS、iOS（iPhone、iPad）などのOSは、それぞれ標準インストールフォント（初めから入っているフォント）が異なります。そのため、font-familyには、各OS表示用に複数のフォント名を指定しておくことが推奨されています。

「Androidの表示用フォントは？」と思った方もいると思いますが、現状Android表示用のfont-familyは設定する必要はないと思います。理由は、OSのバージョン、メーカー、機種などによってインストールされている日本語フォントが異なるため、全てのAndroid環境をカバーするには設定が複雑になり過ぎるからです。

指定したフォントが全て表示されなかった場合の対策として、値の最後に総称フォント（ゴシック体や明朝体）を指定しておきます。

はい

以下の例のように、英語部分（半角英数字）に欧文フォント、日本語部分は日本語フォントを指定したい場合があると思います。

この場合のfont-familyの指定方法は、欧文フォント名を日本語フォント名よりも先に指定することで実現できます。

欧文フォントと日本語フォントを組み合わせる場合のコツ

欧文フォントと日本語フォントを組み合わせる場合は、大前提として、セリフ体とゴシック体、サンセリフ体と明朝体のように、欧文フォントと日本語フォントの書体デザインのカテゴリーを揃えることです。